<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<!-- eslint-disable prettier/prettier -->
<template>
  <div>
    <div class="card content-box">
      <span class="text">机组管理</span>
      <el-divider></el-divider>
      <!--搜索-->
      <div class="mt-4" style="display: flex">
        <el-input v-model="input" style="max-width: 600px" placeholder="搜索机组" class="input-with-select">
          <template #prepend>
            <el-select v-model="select" placeholder="筛选" style="width: 115px">
              <el-option label="机组名" value="1" />
              <el-option label="机组Id" value="2" />
            </el-select>
          </template>
          <template #append>
            <el-button :icon="Search" @click="search" />
          </template>
        </el-input>
        <el-button :icon="Close" :disabled="!input" @click="cancel" style="margin-left: 10px" />
      </div>
      <div style="width: 100%; display: flex; justify-content: start">
        <el-button type="primary" @click="add_unit = true">添加机组</el-button>
      </div>
      <br />
      <!--展示机构列表-->
      <el-table class="custom-table" :data="tableData" border style="width: 100%">
        <el-table-column type="selection" :selectable="selected" width="55" />
        <el-table-column fixed label="序号" width="100" type="index"> </el-table-column>
        <el-table-column label="机组名称" prop="unitName"></el-table-column>
        <el-table-column label="操作" width="200">
          <!--#default="{ row }"-->
          <template #default="{ row }">
            <!--<el-button
              type="primary"
              @click="
                unit = row;
                show_unit = true;
              "
              :icon="Search"
              circle
            ></el-button>-->
            <el-button
              size="small"
              @click="
                unit = row;
                show_unit = true;
              "
            >
              查看
            </el-button>
            <el-button size="small" type="primary" @click="show_edit(row)"> 编辑 </el-button>
            <el-button size="small" type="danger" @click="delunit(row)"> 删除 </el-button>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="空空如也" />
        </template>
      </el-table>

      <br />
      <!--分页 后面要根据数据算-->
      <div style="width: 100%; display: flex; justify-content: end">
      <el-pagination
        :current-page="searchData.current"
        :page-size="searchData.limit"
        :total="total"
        :pager-count="7"
        layout="jumper, prev, pager, next, total"
        @current-change="getData"
      /></div>
    </div>

    <!--机组详情抽屉-->

    <el-drawer v-model="show_unit" size="60%">
      <div>
        <!--机组信息-->
        <el-card style="max-width: 100%">
          <template #header>{{ unit.unitName }}</template>
          <div class="common-layout">
            <el-container>
              <el-main>
                <el-descriptions title="" :column="3" border>
                  <el-descriptions-item label="机组名称" label-align="right">
                    {{ unit.unitName }}
                  </el-descriptions-item>
                </el-descriptions>
              </el-main>
            </el-container>
          </div>
        </el-card>
      </div>

      <div></div>
    </el-drawer>

    <!--机组修改抽屉-->
    <el-drawer v-model="show_groDetail" title="机组信息" :append-to-body="true" size="50%">
      <!-- 修改表单 -->
      <el-form :model="unitForm" label-width="100px">
        <el-form-item label="机组名称">
          <el-input v-model="unit.unitName" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button type="primary" @click="editClick">修改</el-button>
          <el-button type="info" @click="show_groDetail = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <!-- 添加机组弹窗 -->
    <el-dialog v-model="add_unit" width="40%">
      <el-form :model="unitForm" label-width="130px" style="padding-right: 30px">
        <el-form-item label="机组名称">
          <el-input v-model="unitForm.unitName"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="add_unit = false">取消</el-button>
          <el-button type="primary" @click="addunit"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>

    <!--对话框，确定用-->
    <el-dialog v-model="isSure" title="Warning" width="500" align-center>
      <span>{{ sureContext }}</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="isSure = false">取消</el-button>
          <el-button type="primary"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="departmentManage">
import { onMounted, reactive, ref } from "vue";
import { Search, Close } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getAllUnitService, delUnitService, editUnitService, addUnitService } from "@/api/systemManage/unit";
import { unitSearchService } from "@/api/systemManage/search";
//控制变量
const add_unit = ref(false);
const show_groDetail = ref(false);
const show_unit = ref(false);
const isSure = ref(false);
const sureContext = ref("");

//用户搜索输入
const input = ref("");
const select = ref();

//数据模型
//机构
const units = ref([
  {
    unitId: 0,
    unitName: "火电一号群"
  }
]);

const selected = () => {
  return true;
};

const searched = ref([
  {
    unitId: 0,
    unitName: "火电一号群"
  }
]);

//class不允许做变量名，用unit代替
const unit = ref({
  unitId: 0,
  unitName: "火电一号群"
  //class_date: "2024-1-20"
});

const unitForm = ref({
  unitName: ""
});

const cleanForm = () => {
  unitForm.value = {
    unitName: ""
  };
};

//分页
const total = ref(units.value.length);
// searchData-向后端分页查询的对象，即当前页和每页总数
const searchData = reactive({
  current: 1,
  limit: 7
});

const tableData = ref([{}]);

//传入分页参数
const pageQuery = (current, limit) => {
  let begin = current * limit - limit;
  //这里不减一是因为，slice方法裁切是左闭右开数组
  let end = current * limit;
  tableData.value = units.value.slice(begin, end);
};

const getData = newPage => {
  searchData.current = newPage;
  total.value = units.value.length;
  pageQuery(searchData.current, searchData.limit);
};

const getUnitList = async () => {
  let result = await getAllUnitService();
  units.value = result.data.data;
  getData(1);
};
onMounted(getUnitList);

const show_edit = row => {
  unit.value.unitId = row.unitId;
  unit.value.unitName = row.unitName;
  show_groDetail.value = true;
};

const editClick = async () => {
  await editUnitService(unit.value);
  getUnitList();
  show_groDetail.value = false;
  ElMessage.success("修改成功");
  //isSure.value = true;
};

const addunit = async () => {
  const res = await addUnitService(unitForm.value);
  if (res.data.code === 0) {
    add_unit.value = false;
    getUnitList();
    cleanForm();
    ElMessage.success("添加成功");
  } else {
    ElMessage.error("添加失败：" + res.data.message);
  }
};

const delunit = async row => {
  ElMessageBox.confirm("确认删除该机组?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    let dataObj = {
      unitId: row.unitId
    };
    const res = await delUnitService(dataObj);
    if (res.data.code === 0) {
      getUnitList();
      ElMessage.success(row.unitName + "删除成功");
    } else {
      ElMessage.error("删除失败：" + res.data.message);
    }
  });
};

// const submitForm = async () => {
//   ElMessage.success(unitForm.value.unit_name + "submit success");
// };

// const doNext = async () => {
//   if (isSure.value) {
//     if (sureContext.value == "确定提交当前修改？") {
//       submitForm();
//       isSure.value = false;
//       show_groDetail.value = false;
//     }
//   }
// };

//搜索
const search = async () => {
  console.log("搜索筛选" + select.value);
  let dataObj = {
    unitName: "",
    unitId: -1
  };
  if (select.value == 1) {
    dataObj.unitName = input.value;
    console.log(dataObj.unitName);
  } else if (select.value == 2) {
    dataObj.unitId = +input.value;
  }
  let result = await unitSearchService(dataObj);
  console.log(result);
  searched.value = result.data.data;
  tableData.value = searched.value;
};

const cancel = () => {
  input.value = "";
  tableData.value = units.value;
};
</script>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  font-size: 32px;
  font-weight: 600;
  color: #6b778c;
}
.demo-tabs {
  margin-top: -20px;
}
.topadd {
  position: absolute;
  top: 73px;
  right: 40px;
}
.page-container {
  box-sizing: border-box;
  min-height: 100%;
}
.add {
  position: absolute;
  top: 80%;
  right: 3%;
  float: left;
  width: 60px;
  height: 60px;
  font-size: 50px;
  font-weight: 600;
  border-radius: 50%;
}
.inneradd {
  position: absolute;
  top: 55px;
  right: 30px;
  float: left;
  font-weight: 900;
}
.avatar-uploader .avatar {
  display: block;
  width: 178px;
  height: 178px;
}
.avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  width: 178px;
  height: 178px;
  font-size: 28px;
  color: #060707;
  text-align: center;
}
:deep(.my-label) {
  background: var(--el-color-success-light-9) !important;
}
:deep(.my-content) {
  background: var(--el-color-danger-light-9);
}
.Product-image {
  width: auto; /* 图片宽度自适应 */
  max-width: 100%; /* 图片最大宽度为其容器的100% */
  height: auto; /* 图片高度自适应 */
  max-height: 100%; /* 图片最大高度为其容器的100% */
}
.custom-table :deep(.el-table__header-wrapper thead tr th) {
  color: #000000;
  text-align: center;
  background-color: #fafafa;
}
.custom-table :deep(.el-table__body-wrapper tbody tr td) {
  text-align: center; /* 单元格内容居中 */
}
</style>
